<%@ page import="cn.yunhe.bean.Travel" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="js/jquery-3.1.1.js"></script>
<%--<%@page isELIgnored="false" %>--%>
<html>
<head>
    <title>游记浏览</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
        }
        h2,h4{
            margin: 0px;
            padding: 0px;
        }
        /*导航栏区域*/
        /*.head-nav{
            width: 100%;
            height: 60px;
            background-color: green;
        }*/
        .head-wrapper{
            width: 1200px;
            height: 2000px;
            margin: 0 auto;
        }
        /*head-left ul li{
            float: left;
            width: 130px;
            height: 60px;
            line-height: 60px;
            list-style: none;
            text-align: center;
        }*/
        /*新增*/
        /* .head-left ul li a{
              color: white;
          }
          .head-left ul li:hover{
              background: cyan;
          }*/
        .content-map ul li a:hover{
            background-color: cyan;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
        }
        /*.head-right{
             float: right;
             height: 60px;
             line-height: 60px;
         }*/
        .aside-left{
            height: 50px;
            width: 840px;
            margin-top: 20px;
            font-size: 18px;
        }
        .aside-right{
            height: 50px;
            width: 50px;
        }
        .content-wrapper{
            float: left;
            width: 900px;
            height: 1500px;
        }
        .content-right{
            float: left;
            width: 280px;
            height: 1500px;
            margin-left: 15px;
            margin-top: 20px;
        }
        .content-map{
            height: 35px;
        }
        .content-map ul{
            width: 900px;
            height: 35px;
            padding-left: 15px;
        }

        .content-map ul li{
            float: left;
            width: 90px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            list-style: none;
        }
        .travel-show{
            width: 900px;
            height: 1500px;
        }
        .pic-show{
            float: left;
            width: 60px;
            height: 300px;
        }
        .travel-list{
            float: left;
            width: 800px;
            height: 300px;
        }
        .t-pics ul{
            padding-left: 15px;
            height: 125px;
        }
        .t-pics ul li{
            float: left;
            width: 150px;
            height: 125px;
            line-height: 125px;
            padding: 5px;
            list-style: none;
        }
    </style>
</head>
<body>
<%@include file="pageTitle.jsp"%>
<!-- 头部导航栏 -->
<%--<div class="head-nav">
    <div class="head-wrapper clearfix">
        <!-- 左边的区域 -->
        <div class="head-left">
            <ul>
                <li><a href="">攻略首页</a></li>
                <li><a href="">攻略库</a></li>
                <li><a href="">目的地</a></li>
                <li><a href="">创建行程</a></li>
                <li><a href="">发表游记</a></li>
            </ul>
        </div>
        <!-- 右边的搜索框-->
        <div class="head-right">
            <input type="text" name="head-search" placeholder="搜索目的地/攻略/用户">
            <input type="button" data-beacon="click-search" class="sub_btn" value="搜索">
        </div>
    </div>
</div>--%>

<!--  内容呈现区域 -->
    <%
  List<Travel> travelList=(List<Travel>)request.getAttribute("travelList");
  if(travelList==null){
      response.sendRedirect("TravelServlet");
  }
%>
<body class="head-wrapper clearfix">
<!--  游记呈现及选择区域 -->
<div class="content-wrapper clearfix">
    <!-- 搜索框 -->
    <div class="content-search">
        <input  class= "aside-left" type="text" name="search-choice" placeholder="搜攻略...">
        <input class="aside-right" type="button" data-beacon="click-search" class="sub_btn" value="搜索">
    </div>
    <!-- 季节 -->
    <div class="content-map">
        <ul>
            <li>季节:</li>
            <li><a href="" onclick="userChoice('全年')">全部</a></li>
            <li><a href="javascript:;" onclick="userChoice('春季')" >春季</a></li>
            <li><a href="">夏季</a></li>
            <li><a href="">秋季</a></li>
            <li><a href="">冬季</a></li>
        </ul>
    </div>
    <!-- 天数 -->
    <div class="content-map">
        <ul>
            <li>天数:</li>
            <li><a href="">全部</a></li>
            <li><a href="">1-3天</a></li>
            <li><a href="">4-7天</a></li>
            <li><a href="">8-10天</a></li>
            <li><a href="">11-15天</a></li>
        </ul>
    </div>
    <!-- 费用 -->
    <div class="content-map">
        <ul>
            <li>费用:</li>
            <li><a href="">全部</a></li>
            <li><a href="">1-999</a></li>
            <li><a href="">1000-2999</a></li>
            <li><a href="">3000-5999</a></li>
            <li><a href="">6000以上</a></li>
        </ul>
    </div>
    <!-- 人物 -->
    <div class="content-map">
        <ul>
            <li>人物:</li>
            <li><a href="">全部</a></li>
            <li><a href="">独自一人</a></li>
            <li><a href="">三五好友</a></li>
            <li><a href="">家庭</a></li>
            <li><a href="">情侣</a></li>
            <li><a href="">学生</a></li>
        </ul>
    </div>
    <!-- 玩法 -->
    <div class="content-map">
        <ul>
            <li>玩法:</li>
            <li><a href="">全部</a></li>
            <li><a href="">踏青</a></li>
            <li><a href="">游轮</a></li>
            <li><a href="">自驾</a></li>
            <li><a href="">古镇</a></li>
            <li><a href="">海滨海岛</a></li>
        </ul>
    </div>
    <!-- 游记展示 -->
    <c:forEach items="${travelList}" var="t">
    <div class="travel-show">
        <div class="pic-show">
            <a href="">
                <img src="${t.pic}" class="travel-pic" width="40" height="40" title="旅行者得季忆">
            </a>
        </div>
        <div class="travel-list">
            <a href="">
                <h4 class="travel-opt">${t.topic}</h4>
            </a>
            <p class="user-info">
   					<span class="user-name">
   						<a href="">旅行者得季忆-----</a>
   						<a href="">
   							<span class="user-name-icon" title="聪明旅行家"></span>
   						</a>
   					</span>
                <span class="date"><%--2018-06-26 出发--%>${t.pubTime}</span>
                <span class="days"><%--共四天--%>${t.traDay}</span>
                <span class="photo-nums">共222张</span>
                <span class="fee"><%--人均2000元--%>${t.price}</span>
                <span class="people"><%--三五好友--%>${t.playType}</span>
                <span class="nums">
   						<span>
   							<i class="iconfont">&</i>
   							<span class="travel-collection">${t.collection}</span>
   						</span>
   					</span>
                <span class="nums">
   						<span>
   							<i class="iconfont">*</i>
   							<span>120</span>
   						</span>
   					</span>
                <span class="nums">
   						<span>
   							<i class="iconfont">^</i>
   							<span>88</span>
   						</span>
   					</span>
            </p>
            <p class="places">途径:${t.location}</p>
            <p class="places">行程:汤显祖纪念馆
                南尖岩
                <b class="arrow">></b>
                千佛山景区
            </p>
            <div class="t-pics">
                <ul>
                    <li><a href=""><img src="${t.pic}" class="travel-pic" width="150px" height="125px"/></a></li>
                    <li><a href=""><img src="${t.pic}" class="travel-pic" width="150px" height="125px"/></a></li>
                    <li><a href=""><img src="${t.pic}" class="travel-pic"width="150px" height="125px"/></a></li>
                    <li><a href=""><img src="${t.pic}" class="travel-pic"width="150px" height="125px"/></a></li>
                </ul>
                <b class="arrow">></b>
            </div>
        </div>
        </c:forEach>
        <c:remove var="travelList"/>
    </div>
</div>

<script type="text/javascript">
    var h4Node=document.getElementsByTagName("h4")[0];


    var travelShow1=document.getElementsByClassName("travel-show");
    var travelPics=document.getElementsByClassName("travel-pic");
    var travelDate=document.getElementsByClassName("date");
    var travelDays=document.getElementsByClassName("days");
    var travelFee=document.getElementsByClassName("fee");
    var travelPeople=document.getElementsByClassName("people");
    var travelCollection=document.getElementsByClassName("travel-collection");
    var h4Node=document.getElementsByClassName("travel-opt");

    function userChoice(obj){
        var keyword=obj;
        $.ajax({
            url:"ShowRelateTravel",
            data:{"keyword":keyword},
            type:"post",
            success:function(result){
                var resultJson=JSON.parse(result);
                if(resultJson.errCode==200){
                    for(var i=0;i<travelShow1.length;i++){
                        travelShow1[i].style.display="none";
                    }
                    var travelJson=resultJson.data;

                    for(var i=0;i<travelJson.length;i++){
                        travelShow1[i].style.display="block";
                        var t=travelJson[i];

                        h4Node[i].innerHTML=t.topic;
                        travelFee[i].innerHTML=t.price;
                        travelPeople.innerHTML=t.playType;
                        travelCollection[i].innerHTML=t.collection;
                        /*  h4Node[i].innerHTML=t.topic;*/
                        console.log(t.pic+"---------"+t.playType);
                        travelPics[i * 5 +0].src=t.pic;

                        travelPics[i * 5 +1].src=t.pic;
                        travelPics[i * 5 +2].src=t.pic;
                        travelPics[i * 5 +3].src=t.pic;
                        travelPics[i * 5 +4].src=t.pic;
                        console.log(t.pic+"======="+t.playType);
                    }
                }
            }
        })
    }
</script>
</body>
</html>
